test(solid-router): generator-cli-only e2e suite #5625
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WalkthroughIntroduces a complete new end-to-end test environment package for Solid Router generator at Changes
Sequence DiagramsequenceDiagram
participant Browser
participant Vite as Vite Server
participant App as Solid App
participant Router as TanStack Router
participant API as Posts API
Browser->>Vite: Request index.html
Vite-->>Browser: Serve HTML + main.tsx
Browser->>App: Initialize main.tsx
App->>Router: createRouter(routeTree.gen)
App->>App: Render RouterProvider
Browser->>Browser: Render Root Navigation
rect rgb(200, 220, 255)
note right of Browser: Navigate to /posts
Browser->>Router: Navigate /posts
Router->>API: Fetch posts (loader)
API-->>Router: Posts array
Router->>App: Update Posts Component
App-->>Browser: Render posts list
end
rect rgb(200, 220, 255)
note right of Browser: Navigate to /posts/$postId
Browser->>Router: Navigate /posts/1
Router->>API: Fetch post(1)
API-->>Router: Post details
Router->>App: Update Post Detail
App-->>Browser: Render post with title/body
end
rect rgb(255, 220, 200)
note right of Browser: Navigate pathless layout
Browser->>Router: Navigate /_pathlessLayout/_nested-layout/route-a
Router->>App: Render Pathless Layout + Nested Layout + Route A
App-->>Browser: Render full layout hierarchy
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Areas requiring extra attention:
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 07aba84
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-router-ssr-query
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (6)
e2e/solid-router/generator-cli-only/src/styles.css (1)
3-18: Consider removing redundant border-color declarations.The
@layer baseblock (lines 3-11) setsborder-colorusing a CSS variable, and then the universal selector at lines 16-17 applies border utilities again using@apply. This creates redundancy. Since Tailwind v4 handles theming internally, consider removing the@layer baseblock and relying solely on the@applyutilities for consistency.Apply this diff to remove the redundancy:
-@layer base { - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - border-color: var(--color-gray-200, currentcolor); - } -} - html { color-scheme: light dark; }e2e/solid-router/generator-cli-only/package.json (1)
11-11: Consider cross-platform compatibility for the cleanup command.The
rm -rfcommand is Unix-specific and won't work on Windows systems. While this is commonly used in Node.js projects, consider using a cross-platform alternative for better portability.You could use Node.js built-in fs methods or a package like
rimraf:- "test:e2e": "rm -rf port*.txt; playwright test --project=chromium" + "test:e2e": "node -e \"require('fs').readdirSync('.').filter(f=>f.match(/^port.*\\.txt$/)).forEach(f=>require('fs').unlinkSync(f))\" && playwright test --project=chromium"Or keep the current Unix-specific approach if the project primarily targets Unix-like environments.
e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (1)
9-11: Add an explicit component return type for stricter TS.Keeps strict mode happy and aligns with codebase patterns.
Apply this diff:
-import { createFileRoute } from '@tanstack/solid-router' +import { createFileRoute } from '@tanstack/solid-router' +import type { JSX } from 'solid-js' @@ -function LayoutAComponent() { +function LayoutAComponent(): JSX.Element { return <div>I'm layout A!</div> }e2e/solid-router/generator-cli-only/src/routes/posts.route.tsx (2)
21-23: Coerce postId to string when building params.Prevents accidental number→string mismatches at runtime.
- params={{ - postId: post.id, - }} + params={{ + postId: String(post.id), + }}
15-32: Consider Solid’s for keyed lists.Improves update performance and avoids re-creating arrays each render.
Example refactor:
- <ul class="list-disc pl-4"> - {[...posts(), { id: 'i-do-not-exist', title: 'Non-existent Post' }].map( - (post) => { - return ( - <li class="whitespace-nowrap"> + <ul class="list-disc pl-4"> + <For each={[...posts(), { id: 'i-do-not-exist', title: 'Non-existent Post' }]}> + {(post) => ( + <li class="whitespace-nowrap"> <Link to="/posts/$postId" params={{ - postId: post.id, + postId: String(post.id), }} class="block py-1 text-blue-600 hover:opacity-75" activeProps={{ class: 'font-bold underline' }} > <div>{post.title.substring(0, 20)}</div> </Link> - </li> - ) - }, - )} + </li> + )} + </For> </ul>e2e/solid-router/generator-cli-only/src/posts.ts (1)
5-9: Export the PostType for reuse across routes/tests.Keeps types consistent where needed.
-type PostType = { +export type PostType = { id: string title: string body: string }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (24)
e2e/solid-router/generator-cli-only/.gitignore(1 hunks)e2e/solid-router/generator-cli-only/index.html(1 hunks)e2e/solid-router/generator-cli-only/package.json(1 hunks)e2e/solid-router/generator-cli-only/playwright.config.ts(1 hunks)e2e/solid-router/generator-cli-only/postcss.config.mjs(1 hunks)e2e/solid-router/generator-cli-only/src/main.tsx(1 hunks)e2e/solid-router/generator-cli-only/src/posts.ts(1 hunks)e2e/solid-router/generator-cli-only/src/routeTree.gen.ts(1 hunks)e2e/solid-router/generator-cli-only/src/routes/__root.tsx(1 hunks)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout.tsx(1 hunks)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout.tsx(1 hunks)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-a.tsx(1 hunks)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-b.tsx(1 hunks)e2e/solid-router/generator-cli-only/src/routes/index.tsx(1 hunks)e2e/solid-router/generator-cli-only/src/routes/posts.$postId.tsx(1 hunks)e2e/solid-router/generator-cli-only/src/routes/posts.index.tsx(1 hunks)e2e/solid-router/generator-cli-only/src/routes/posts.route.tsx(1 hunks)e2e/solid-router/generator-cli-only/src/styles.css(1 hunks)e2e/solid-router/generator-cli-only/tests/app.spec.ts(1 hunks)e2e/solid-router/generator-cli-only/tests/setup/global.setup.ts(1 hunks)e2e/solid-router/generator-cli-only/tests/setup/global.teardown.ts(1 hunks)e2e/solid-router/generator-cli-only/tsconfig.json(1 hunks)e2e/solid-router/generator-cli-only/tsr.config.json(1 hunks)e2e/solid-router/generator-cli-only/vite.config.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
e2e/solid-router/generator-cli-only/tests/setup/global.teardown.tse2e/solid-router/generator-cli-only/src/routes/posts.$postId.tsxe2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-a.tsxe2e/solid-router/generator-cli-only/playwright.config.tse2e/solid-router/generator-cli-only/src/posts.tse2e/solid-router/generator-cli-only/src/routes/_pathlessLayout.tsxe2e/solid-router/generator-cli-only/src/routes/posts.index.tsxe2e/solid-router/generator-cli-only/tests/app.spec.tse2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout.tsxe2e/solid-router/generator-cli-only/tests/setup/global.setup.tse2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-b.tsxe2e/solid-router/generator-cli-only/src/routes/posts.route.tsxe2e/solid-router/generator-cli-only/src/routes/index.tsxe2e/solid-router/generator-cli-only/src/main.tsxe2e/solid-router/generator-cli-only/src/routes/__root.tsxe2e/solid-router/generator-cli-only/src/routeTree.gen.ts
e2e/**
📄 CodeRabbit inference engine (AGENTS.md)
Store end-to-end tests under the e2e/ directory
Files:
e2e/solid-router/generator-cli-only/tests/setup/global.teardown.tse2e/solid-router/generator-cli-only/src/routes/posts.$postId.tsxe2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-a.tsxe2e/solid-router/generator-cli-only/src/styles.csse2e/solid-router/generator-cli-only/index.htmle2e/solid-router/generator-cli-only/playwright.config.tse2e/solid-router/generator-cli-only/src/posts.tse2e/solid-router/generator-cli-only/src/routes/_pathlessLayout.tsxe2e/solid-router/generator-cli-only/tsconfig.jsone2e/solid-router/generator-cli-only/src/routes/posts.index.tsxe2e/solid-router/generator-cli-only/tests/app.spec.tse2e/solid-router/generator-cli-only/package.jsone2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout.tsxe2e/solid-router/generator-cli-only/vite.config.jse2e/solid-router/generator-cli-only/postcss.config.mjse2e/solid-router/generator-cli-only/tests/setup/global.setup.tse2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-b.tsxe2e/solid-router/generator-cli-only/src/routes/posts.route.tsxe2e/solid-router/generator-cli-only/src/routes/index.tsxe2e/solid-router/generator-cli-only/tsr.config.jsone2e/solid-router/generator-cli-only/src/main.tsxe2e/solid-router/generator-cli-only/src/routes/__root.tsxe2e/solid-router/generator-cli-only/src/routeTree.gen.ts
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
e2e/solid-router/generator-cli-only/src/routes/posts.$postId.tsxe2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-a.tsxe2e/solid-router/generator-cli-only/src/routes/_pathlessLayout.tsxe2e/solid-router/generator-cli-only/src/routes/posts.index.tsxe2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout.tsxe2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-b.tsxe2e/solid-router/generator-cli-only/src/routes/posts.route.tsxe2e/solid-router/generator-cli-only/src/routes/index.tsxe2e/solid-router/generator-cli-only/src/routes/__root.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
e2e/solid-router/generator-cli-only/package.json
🧠 Learnings (3)
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase
Applied to files:
e2e/solid-router/generator-cli-only/tsconfig.json
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
PR: TanStack/router#5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
e2e/solid-router/generator-cli-only/tests/app.spec.tse2e/solid-router/generator-cli-only/src/routeTree.gen.ts
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
PR: TanStack/router#5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
e2e/solid-router/generator-cli-only/src/routeTree.gen.ts
🧬 Code graph analysis (13)
e2e/solid-router/generator-cli-only/tests/setup/global.teardown.ts (1)
scripts/set-ts-version.js (1)
packageJson(33-33)
e2e/solid-router/generator-cli-only/src/routes/posts.$postId.tsx (3)
e2e/solid-router/generator-cli-only/src/routes/posts.index.tsx (1)
Route(3-5)e2e/solid-router/generator-cli-only/src/routes/posts.route.tsx (1)
Route(4-7)e2e/solid-router/generator-cli-only/src/posts.ts (1)
fetchPost(24-36)
e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (5)
e2e/solid-router/generator-cli-only/src/routes/__root.tsx (1)
Route(4-14)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout.tsx (1)
Route(3-5)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout.tsx (1)
Route(3-5)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1)
Route(3-7)e2e/solid-router/generator-cli-only/src/routes/index.tsx (1)
Route(3-5)
e2e/solid-router/generator-cli-only/src/posts.ts (1)
e2e/react-router/js-only-file-based/src/posts.js (1)
queryURL(5-5)
e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout.tsx (3)
e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout.tsx (1)
Route(3-5)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (1)
Route(3-7)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1)
Route(3-7)
e2e/solid-router/generator-cli-only/src/routes/posts.index.tsx (2)
e2e/solid-router/generator-cli-only/src/routes/posts.$postId.tsx (1)
Route(5-12)e2e/solid-router/generator-cli-only/src/routes/posts.route.tsx (1)
Route(4-7)
e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout.tsx (3)
e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout.tsx (1)
Route(3-5)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (1)
Route(3-7)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1)
Route(3-7)
e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (3)
e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout.tsx (1)
Route(3-5)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout.tsx (1)
Route(3-5)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (1)
Route(3-7)
e2e/solid-router/generator-cli-only/src/routes/posts.route.tsx (2)
e2e/solid-router/generator-cli-only/src/routes/posts.$postId.tsx (1)
Route(5-12)e2e/solid-router/generator-cli-only/src/posts.ts (1)
fetchPosts(17-22)
e2e/solid-router/generator-cli-only/src/routes/index.tsx (1)
e2e/solid-router/generator-cli-only/src/routes/__root.tsx (1)
Route(4-14)
e2e/solid-router/generator-cli-only/src/main.tsx (1)
e2e/react-router/js-only-file-based/src/main.jsx (2)
router(8-13)rootElement(15-15)
e2e/solid-router/generator-cli-only/src/routes/__root.tsx (8)
e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout.tsx (1)
Route(3-5)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout.tsx (1)
Route(3-5)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (1)
Route(3-7)e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1)
Route(3-7)e2e/solid-router/generator-cli-only/src/routes/index.tsx (1)
Route(3-5)e2e/solid-router/generator-cli-only/src/routes/posts.$postId.tsx (1)
Route(5-12)e2e/solid-router/generator-cli-only/src/routes/posts.index.tsx (1)
Route(3-5)e2e/solid-router/generator-cli-only/src/routes/posts.route.tsx (1)
Route(4-7)
e2e/solid-router/generator-cli-only/src/routeTree.gen.ts (1)
e2e/react-router/js-only-file-based/src/routeTree.gen.js (12)
PathlessLayoutRoute(21-24)PostsRouteRoute(25-29)PostsIndexRoute(35-39)PathlessLayoutNestedLayoutRoute(45-49)PathlessLayoutNestedLayoutRouteBRoute(50-55)PathlessLayoutNestedLayoutRouteARoute(56-61)PostsRouteRouteWithChildren(68-70)PathlessLayoutRouteWithChildren(86-88)PathlessLayoutNestedLayoutRouteWithChildren(77-80)PostsRouteRouteChildren(63-66)PathlessLayoutNestedLayoutRouteChildren(72-75)PathlessLayoutRouteChildren(82-84)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (21)
e2e/solid-router/generator-cli-only/.gitignore (1)
1-11: Gitignore configuration looks good.The patterns are appropriate for a Vite project with Playwright e2e tests, covering dependency folders, build output, test artifacts, and platform-specific files. The file structure is clean and follows standard conventions.
e2e/solid-router/generator-cli-only/tsconfig.json (1)
1-16: TypeScript configuration properly aligned with project standards.The configuration correctly establishes strict mode TypeScript checking with appropriate settings for a Vite+SolidJS environment. JSX is properly configured to preserve source format and import from
solid-js, and module resolution is set toBundlerfor compatibility with Vite. The strict compiler option ensures extensive type safety across this e2e test suite, aligning with project guidelines. Based on learningse2e/solid-router/generator-cli-only/postcss.config.mjs (1)
1-5: LGTM!The PostCSS configuration correctly uses the
@tailwindcss/postcssplugin for Tailwind CSS v4 integration.e2e/solid-router/generator-cli-only/src/routes/__root.tsx (1)
1-61: LGTM!The root route configuration is well-structured with proper navigation, error handling for not-found routes, and devtools integration. The Tailwind utilities are compatible with v4, and the intentional type error for the non-existent route appropriately tests 404 behavior.
e2e/solid-router/generator-cli-only/tsr.config.json (1)
1-5: LGTM!The TanStack Router configuration is correctly structured with appropriate paths and target framework.
e2e/solid-router/generator-cli-only/index.html (1)
1-12: LGTM!The HTML entry point is properly structured with all necessary meta tags and script references for a Vite-based Solid application.
e2e/solid-router/generator-cli-only/tests/setup/global.setup.ts (1)
1-6: LGTM!The global setup correctly uses modern import attributes syntax and properly initializes the e2e test server.
e2e/solid-router/generator-cli-only/tests/setup/global.teardown.ts (1)
1-6: LGTM!The global teardown correctly mirrors the setup file and properly cleans up the e2e test server.
e2e/solid-router/generator-cli-only/tests/app.spec.ts (1)
1-35: LGTM!The end-to-end test suite comprehensively covers the main routing scenarios including post navigation, nested pathless layouts, and not-found behavior. The test structure follows Playwright best practices with proper setup, locators, and assertions.
e2e/solid-router/generator-cli-only/src/styles.css (1)
9-9: The CSS variable--color-gray-200is provided by default in Tailwind v4.Tailwind v4's default theme includes
--color-gray-200: oklch(0.929 0.013 255.508), and since the Tailwind v4 update the default and recommended way of managing and using colors is with native CSS variables. When you use@import 'tailwindcss'(as all files in this codebase do), these variables are automatically available. The code is correct as-is and requires no changes.e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout.tsx (1)
1-34: LGTM!The nested pathless layout is well-structured with proper route definition, navigation links, and outlet rendering. The Tailwind v4 classes used here are standard utilities that remain unchanged in v4.
e2e/solid-router/generator-cli-only/src/routes/index.tsx (1)
1-13: LGTM!Clean root route implementation with proper route definition and simple home component.
e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1)
1-11: LGTM!Simple and correct route definition for Layout B.
e2e/solid-router/generator-cli-only/src/routes/_pathlessLayout.tsx (1)
1-16: LGTM!Pathless layout correctly implements the layout pattern with proper outlet rendering for nested routes.
e2e/solid-router/generator-cli-only/src/routes/posts.index.tsx (1)
1-9: LGTM!Clean posts index route with appropriate placeholder component.
e2e/solid-router/generator-cli-only/vite.config.js (1)
1-7: LGTM!Standard Vite configuration with Solid plugin, appropriate for the e2e test environment.
e2e/solid-router/generator-cli-only/playwright.config.ts (1)
1-41: LGTM!Well-configured Playwright setup for e2e testing with appropriate port management, global hooks, and single-worker execution for test stability.
e2e/solid-router/generator-cli-only/package.json (1)
13-22: LGTM!Dependencies are correctly configured with
workspace:^protocol for internal packages as per coding guidelines, and Tailwind v4.1.15 is properly included.e2e/solid-router/generator-cli-only/src/main.tsx (2)
1-12: Bootstrap looks solid.Router config and guarded render are standard and correct.
1-4: No action required—both dependencies are already present.The e2e package.json already declares
@tanstack/solid-router(workspace:^) andredaxios(^0.5.1) in dependencies. No missing packages to add.e2e/solid-router/generator-cli-only/src/routes/posts.$postId.tsx (1)
5-12: Ensure loader throws NotFoundError for missing posts to hit notFoundComponent.With the proposed
fetchPostchange (404→NotFoundError), thisnotFoundComponentwill render “Post not found” instead of the generic error UI.After updating
fetchPost, re-run the e2e step that clicks “Non-existent Post” and confirm this component renders.
| @@ -0,0 +1,29 @@ | |||
| { | |||
| "name": "tanstack-solid-router-e2e-react-generator-cli-only", | |||
There was a problem hiding this comment.
Fix incorrect package name reference.
The package name contains "react" but this is a Solid Router e2e test suite. The name should reflect that it's for Solid, not React.
Apply this diff to correct the package name:
- "name": "tanstack-solid-router-e2e-react-generator-cli-only",
+ "name": "tanstack-solid-router-e2e-solid-generator-cli-only",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "name": "tanstack-solid-router-e2e-react-generator-cli-only", | |
| "name": "tanstack-solid-router-e2e-solid-generator-cli-only", |
🤖 Prompt for AI Agents
In e2e/solid-router/generator-cli-only/package.json around line 2, the package
name incorrectly contains "react"; update the "name" field to reference "solid"
instead of "react" so it reflects the Solid Router e2e test suite (e.g., replace
"tanstack-solid-router-e2e-react-generator-cli-only" with a name that uses
"solid" such as "tanstack-solid-router-e2e-solid-generator-cli-only" or similar
project naming consistent with other Solid e2e packages).
Comment on lines
+24
to
+36
| export const fetchPost = async (postId: string) => { | ||
| console.info(`Fetching post with id ${postId}...`) | ||
| const post = await axios | ||
| .get<PostType>(`${queryURL}/posts/${postId}`) | ||
| .then((r) => r.data) | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition | ||
| if (!post) { | ||
| throw new NotFoundError(`Post with id "${postId}" not found!`) | ||
| } | ||
|
|
||
| return post | ||
| } |
There was a problem hiding this comment.
Map 404s (and empty payloads) to NotFoundError so route notFoundComponent renders.
As written, axios 404 rejects before if (!post) runs, so the not-found UI won’t show. Catch 404s and throw NotFoundError; also validate empty bodies and encode the param.
Apply this diff:
-export const fetchPost = async (postId: string) => {
- console.info(`Fetching post with id ${postId}...`)
- const post = await axios
- .get<PostType>(`${queryURL}/posts/${postId}`)
- .then((r) => r.data)
-
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
- if (!post) {
- throw new NotFoundError(`Post with id "${postId}" not found!`)
- }
-
- return post
-}
+export const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`)
+ try {
+ const post = await axios
+ .get<PostType | null>(`${queryURL}/posts/${encodeURIComponent(postId)}`)
+ .then((r) => r.data)
+
+ // Treat null/empty payloads as not found
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+ if (!post || !(post as any).id) {
+ throw new NotFoundError(`Post with id "${postId}" not found!`)
+ }
+ return post
+ } catch (err: any) {
+ const status = err?.response?.status ?? err?.status
+ if (status === 404) {
+ throw new NotFoundError(`Post with id "${postId}" not found!`)
+ }
+ throw err
+ }
+}🤖 Prompt for AI Agents
In e2e/solid-router/generator-cli-only/src/posts.ts around lines 24 to 36, the
axios call will reject on 404 so the existing null-check never runs and the
notFoundComponent won’t render; wrap the request in a try/catch, use
encodeURIComponent(postId) in the URL, and in the catch map a 404 response to
throw new NotFoundError(postId) while rethrowing other errors; after the request
also verify the response body is present and throw NotFoundError if it’s empty.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Release Notes
Chores
Tests